<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 注意 vue-resource 依赖于Vue 所以先后顺序不能反 -->
    <!-- this.$http.jsonp -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加用户</h3>
            </div>
            <div class="panel-body form-inline">

                <label>
                    loginName:
                    <input type="text" v-model="loginName" class="form-control">
                </label>

                <label>
                    password:
                    <input type="text" v-model="password" class="form-control">
                </label>

                <input type="button" value="添加" @click="add" class="btn btn-primary">
            </div>

            <div class="panel-body form-inline">

                <label>
                    loginName:
                    <input type="text" v-model="loginName" class="form-control">
                </label>

                <label>
                    password:
                    <input type="text" v-model="password" class="form-control">
                </label>

                <input type="button" value="登录" @click="getUser" class="btn btn-primary">

            </div>


            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>userId</th>
                        <th>loginName</th>
                        <th>password</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{userId}}</td>
                        <td>{{loginName}}</td>
                        <td>{{password}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // 如果我们通过了全局配置，请求的数据接口 根域名，则每次单独发起http请求的时候，请求的url路径
        // ，应该以相对路径开头，前面不能带 /，否则不会启用根路径做拼接
        Vue.http.options.root='http://localhost:8041';
        var vm = new Vue({
            el: '#app',
            data: {
                loginName: '',
                userId: '',
                password: '',
                users: [{
                    userId: 'afsd',
                    loginName: '春刀dfadfa',
                    password: 'u9+adf=='
                }]
            },
            methods: {
                add() { // 添加品牌列表到后台服务器
                    // 分析
                    // 1.根绝后端注册的api决定使用post请求
                    // 2.this.$http.post()中接收三个参数：
                    // 2.1 第一个参数： 要请求的URL地址
                    // 2.2 第二个参数： 要提交给服务器的数据，要以对象形式提交给服务器(name:this.name)
                    // 3.3 第三个参数： 是一个配置对象，要以哪种表单数据类型提交过去(emulateJSON:true；以普通表单格式，将数据提交给服务器)
                    // application/x-www-form-urlencoded
                    // 3. 在post方法中，使用.then来设置成功的回调函数，如果想要拿到成功的结果，需要result.body
                    this.$http.post('front/user/add', {
                        "loginName": this.loginName,
                        "password": this.password
                    },{emulateJSON: false}).then(result => {
                        if (result.body.code === 1) {
                            console.log(result.body)
                            alert('添加成功')
                            this.loginName =''
                            this.password = ''
                        } else {
                            console.log(result.body)
                            alert('添加失败')
                        }
                    })
                },
                getUser() { // 获取所有的用户列表
                    // 分析
                    // 1.由于已经导入了vue-resource包，所以，可以直接通过this.$http 来发起数据请求
                    // 2.通过接口api，知道 获取列表的时候，要发起一个get请求
                    // 3.通过this.$http.get('url').then(function(result))
                    // 4.当通过then指定回调函数之后，在回调函数中，可以拿到数据服务器返回的result
                    // 5.根据数据的code值，判断是否为正常；可以把result.message赋值给this.list；如果不正常，弹窗提醒
                    this.$http.post('front/user', {
                        "loginName": this.loginName,
                        "password": this.password
                    }, {}).then(result => {
                        // 通过$http获取到的数据，都在result.body中放着
                        var result = result.body
                        if (result.code === 1) {
                            // 成功
                            console.log(result)
                            this.userId = result.data.userId
                            this.loginName = result.data.loginName
                            this.password = result.data.password
                        } else {
                            // 失败
                            alert('获取数据失败')
                        }
                    })
                    // axios.get('http://localhost:8041/front/user').then(function(result){
                    //     if(result.code ===1){
                    //         // this.list = result.data
                    //         console.log('成功')
                    //     }else{
                    //         alert('失败')
                    //     }
                    // })
                }
            },
            created() { // 当vm实例的data和method初始化完毕后，vm实例会自动执行created这个生命周期函数
                // this.getUser()
            }
        });
    </script>
</body>

</html>